<template>
  <view class="wrapper">
    <searchBar @search="toSearch"/>
    <view class="history-search">
      <view class="title">
        <text class="title">历史搜索</text>
        <icon type="clear"
              size="18" @click="clearList">
        </icon>
      </view>
      <view>
        <view v-for="(item,index) in historyList" :key="index" @click="toSearch(item)">
        	{{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import searchBar from '@/components/searchBar'
const HISTORY_LIST = 'history'
export default {
  components: {
    searchBar
  },
		
	data(){
		return{
			// 设置默认值
			historyList:[]
		}
	},
	// 跳转动画开始之后
	onShow() {
		this.historyList=uni.getStorageSync(HISTORY_LIST) || []
	},
	methods:{
		// 跳转至搜索列表
		toSearch(inputVal){
			// 添加本地储存
			// 进行数据拼接+去重
			let _historyList = [... new Set([inputVal,...this.historyList])];
			// 将数据存至本地
			// HISTORY_LIST:本地数据名
			// historyList:本地数据
			uni.setStorageSync(HISTORY_LIST,_historyList)
			uni.navigateTo({
				url:'/pages/search_list/search_list?catName='+ inputVal
			})
		},
		// 点击清除按钮 清空历史搜索 （包括本地储存）
		clearList(){
			// 弹出提示框
			uni.showModal({
				title:'提示',
				content:'确定要清空吗？',
				success:res =>{
					// console.log(res)
					if(res.confirm){
						// 清空界面历史数据
						this.historyList=[]
						// 清空本地历史数据
						uni.removeStorageSync(HISTORY_LIST)
					}
				}
			})
		},

	}
}
</script>

<style lang="less">
.search {
  background-color: #eee;
  padding: 30rpx 15rpx;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  position: relative;
  icon {
    position: absolute;
    top: 50rpx;
    left: 38rpx;
  }
  input {
    height: 60rpx;
    flex: 1;
    background-color: #fff;
    padding-left: 70rpx;
    box-sizing: border-box;
    border-radius: 4rpx;
  }
  button {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    border: 1rpx solid #bfbfbf;
    background-color: #eee;
    margin-left: 20rpx;
  }
}

.history-search {
  color: #333;
  font-size: 28rpx;
  padding: 30rpx 30rpx 30rpx 15rpx;
  .title {
    display: flex;
    justify-content: space-between;
  }

  view {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    view {
      height: 64rpx;
      line-height: 64rpx;
      padding: 0 26rpx;
      background-color: #ddd;
      margin: 0 30rpx 16rpx 0;
    }
  }
}
</style>